import React from 'react';
import { Card, Space, Tag, Typography, Button, Row, Col, Tooltip } from 'antd';
import { FolderOpenOutlined, EyeOutlined, TagOutlined, CodeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useLanguage } from '../../i18n/I18nProvider';
import './ProjectCard.scss';
import {ProjectSimpleTree} from "../../../types";

const { Title, Text, Paragraph } = Typography;

export interface ProjectCardProps {
  project: ProjectSimpleTree;
  level?: number;
}

export interface ProjectNode {
  id: string;
  name: string;
  path: string;
  type: string;
  dependencies?: Record<string, string>;
  devDependencies?: Record<string, string>;
  children?: ProjectNode[];
}

const ProjectCard: React.FC<ProjectCardProps> = ({ project, level = 0 }) => {
  const navigate = useNavigate();
  const { t } = useLanguage();

  const viewDetails = () => {
    navigate(`/project/${project.path}`);
  };

  const openDirectory = () => {
    // 此处可以调用electron API打开目录
    console.log('打开目录:', project.path);
  };

  // 递归渲染子项目卡片
  const renderChildrenCards = (children?: ProjectSimpleTree[]) => {
    if (!children || children.length === 0) return null;

    return (
      <div className="project-children" style={{ marginLeft: '20px', marginTop: '16px' }}>
        <Title level={5}>{t('project.subprojects')}</Title>
        <Row gutter={[16, 16]}>
          {children.map(child => (
            <Col xs={24} sm={12} md={8} key={child.path}>
              <ProjectCard project={child} level={level + 1} />
            </Col>
          ))}
        </Row>
      </div>
    );
  };

  // 计算依赖数量
  // const getDependencyCount = () => {
  //   const deps = project.dependencies ? Object.keys(project.dependencies).length : 0;
  //   const devDeps = project.devDependencies ? Object.keys(project.devDependencies).length : 0;
  //   return deps + devDeps;
  // };

  return (
    <div className="project-card-wrapper">
      <Card
        className="project-card"
        title={
          <Space>
            <CodeOutlined />
            <Text strong>{project.name}</Text>
          </Space>
        }
        extra={
          <Space>
            <Button
              icon={<EyeOutlined />}
              size="small"
              onClick={viewDetails}
            >
              {t('project.viewDetails')}
            </Button>
            <Button
              icon={<FolderOpenOutlined />}
              size="small"
              onClick={openDirectory}
            >
              {t('project.openDir')}
            </Button>
          </Space>
        }
      >
        <div className="project-info">
          <Paragraph ellipsis={{ rows: 1, tooltip: project.path }}>
            <strong>{t('project.path')}:</strong> {project.path}
          </Paragraph>

          <Space className="project-tags">
            <Tag color="blue">
              <TagOutlined /> {project.type}
            </Tag>

            {/*<Tooltip title={t('project.dependencyCount')}>*/}
            {/*  <Tag color="green">{getDependencyCount()} {t('project.dependencies')}</Tag>*/}
            {/*</Tooltip>*/}
          </Space>

          {renderChildrenCards(project.children)}
        </div>
      </Card>
    </div>
  );
};

export default ProjectCard;
